<!-- 首页 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="false"><block slot="content">搭子匹配</block></cu-custom> 
		<mescroll-uni ref="mescrollGameRef" height="100%" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<!-- <view :style="{paddingTop: CustomBar + 'px'}"></view> -->
			<view class="page">
				<view class="card-list-box">
					
					<view class="card-item" v-for="(qun, index) in dataList" :key="index">
						<view class="card-left">
							<view class="card-title">{{qun.title}}</view>
							<view class="card-text">剩余男生{{qun.nan}}人</view>
							<view class="card-text">剩余女生{{qun.nv}}人</view>
						</view>
						<view class="card-right">
							<view class="card-tip">已参加{{qun.nn}}人</view>
							<view class="join-btn" @click="sendPlay(qun)">立即匹配</view>
						</view>
					</view>
					
					
				</view>
			</view>
		</mescroll-uni>
		
		<loading text="努力匹配中.." mask="true" click="false" ref="loading"></loading>
		<user-auth></user-auth>
		<coin-popup></coin-popup>
		<cash-popup></cash-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		
	},
	props:{
		
	},
	data() {
		return {
			CustomBar: this.CustomBar, 
			upOption:{
				auto:false, // 不自动加载
				// page: {
				// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				// 	size: 10 // 每页数据的数量
				// },
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty:{
			        icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~', // 提示
					// btnText: '去看看'
				},
				toTop: {
					right: 40,
					width: 80,
					bottom: 200,
				},
				bgColor: '#faf1f1',
				textColor: '#606266',
			    textNoMore:'没有更多了'
			},
			gameList: [],
			dataList: [],
			list: [ {
				name: '组局中'
			}, {
				name: '待预定',
			}, {
				name: '已预定',
			}, {
				name: '已到店',
			}],
			current: 0,
		};
	},
	created() {
		this.getGameList();
		uni.$on('indexgame',this.init);
	},
	destroyed() {
		// 注销全局配置监听
		uni.$off('indexgame');
	},
	methods: {
		downCallback(mescroll) {
			mescroll.endSuccess();
			mescroll.resetUpScroll();
		},
		async upCallback(mescroll) {
			this.$u.get('/wq/qun/getList',{
				pageNum: mescroll.num,
				pageSize: mescroll.size,
			}).then(res => {
				mescroll.endSuccess(res.rows.length);
				if (mescroll.num == 1) {
					this.dataList = res.rows;
				} else {
					this.dataList = this.dataList.concat(res.rows);
				}
			}).catch(err => {
				mescroll.endErr();
			});
		},
		change(e) {
			this.current = e;
		},
		init(e) {
			this.mescroll.resetUpScroll();
		},
		getGameList() {
			this.$u.get('/wq/miniGame/list',{
				pageNum: 1,
				pageSize: 3,
			}).then(res => {
				this.gameList = res.rows;
			});
		},
		reload() {
			this.query();
		},
		load() {
			this.loadmore();
		},
		toWeb() {
			uni.navigateTo({
				url:'/pages/index/web'
			});
		},
		moreGame() {
			this.$u.route({
				url: 'packgeMine/pages/game/more',
				params: {
					my: 'true',
				}
			});
		},
		qunPlay(e) {
			this.$u.route({
				url: 'packgeMine/pages/game/dynamic',
				params: {
					dynamicId: e.adId,
					back: true,
					my: 'true',
				}
			});
		},
		gamePlay(e) {
			this.$u.route({
				url: 'pages/question/index',
				params: {
					my: 'true',
				}
			});
		},
		goHome(item) {
			this.$u.route({
				url: 'pages/index/home',
				params: {
					homeId: item.id,
					my: 'true',
					back: true,
				}
			});
		},
		loadmore() {
			this.status = 'loading';
			if(this.isEnd){
				this.status = 'nomore';
				return;
			}
			this.$u.get('/wq/game/list',{
				pageNum: this.current,
				pageSize: this.pageSize,
			}).then(res => {
				var totalPage = Math.ceil(res.total/this.pageSize);
				this.pages = totalPage;
				this.current ++;
				this.status = 'loadmore';
				if(this.current > this.pages){
					this.status = 'nomore';
					this.isEnd = true;
				}
				
				this.dataList = this.dataList.concat(res.rows);
			}).catch(err => {
				
			})
		},
		query() {
			this.current = 1;
			this.isEnd = false;
			this.status = 'loadmore';
			this.loadquery();
			this.$emit('fresh');
		},
		loadquery() {
			this.$u.get('/wq/game/list',{
				pageNum: this.current,
				pageSize: this.pageSize,
			}).then(res => {
				var totalPage = Math.ceil(res.total/this.pageSize);
				this.pages = totalPage;
				this.current ++;
				this.status = 'loadmore';
				if(this.current > this.pages){
					this.status = 'nomore';
					this.isEnd = true;
				}
				
				this.dataList = res.rows;
			}).catch(err => {
				
			})
		},
		chat(e) {
			this.$u.route({
				url: 'packgeMine/pages/chat/chat',
				params: {
					roomId: e.roomId,
				}
			});
		},
		sendPlay(e) {
			var _this = this;
			_this.$u.get('/system/user/getTmplId',{
				appId : _this.website.appId
			}).then(res => {
				var tmplIds = res.tmplIds
				var tmplId = tmplIds[0];
				wx.getSetting({
				  withSubscriptions: true,
				  success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
					  if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
						let item = res.subscriptionsSetting.itemSettings[tmplId]
						if (item == "reject") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请打开通知管理里面的消息提醒',
						  	showCancel: false,
						  	success: function(res) {
						  		uni.openSetting({
								  success(res) {
									console.log(res.authSetting)
								  },
								  fail(err) {
									console.error(err);
								  }
								});
						  	}
						  });
						} else if (item == "accept") {
						  uni.requestSubscribeMessage({
						  	//数组，最多放三个订阅模板的ID
						  	tmplIds: tmplIds,
						  	success: function(res) {
						  		var code = res[tmplIds[0]];
						  		if('reject' == code){
						  			_this.$u.toast('请点击允许订阅消息');
						  		}else{
									_this.play(e);
									return;
						  		}
						  	},
						  	fail: function(res) {
						  		console.log(res)
						  	},
						  	complete: (res) => {
						  		
						  	}
						  });
						} else if (item == "ban") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请在设置打开订阅消息开关',
						  	showCancel: false,
						  	success: function(res) {
						  		
						  	}
						  });
						}
					  }else{
						uni.requestSubscribeMessage({
							//数组，最多放三个订阅模板的ID
							tmplIds: tmplIds,
							success: function(res) {
								var code = res[tmplIds[0]];
								if('reject' == code){
									_this.$u.toast('请点击允许订阅消息');
								}else{
									_this.play(e);
									return;
								}
							},
							fail: function(res) {
								console.log(res)
							},
							complete: (res) => {
								
							}
						});
					  }
					} else {
					  uni.showModal({
					  	title: '温馨提示',
					  	content: '请在设置打开通知管理开关',
					  	showCancel: false,
					  	success: function(res) {
					  		uni.openSetting({
							  success(res) {
								console.log(res.authSetting)
							  },
							  fail(err) {
								console.error(err);
							  }
							});
					  	}
					  });
					}
				  }
				});
				
			})
		},
		play(e) {
			this.judgeLogin(() => {
				this.addJoin(e);
			});
		},
		addJoin(e) {
			this.$refs.loading.open();
			this.$u.post('/wq/qun/join',{
				id: e.id,
			}).then(res => {
				this.$refs.loading.close();
				var roomId = res.data.roomId;
				this.$u.route({
					url: 'packgeMine/pages/chat/chat',
					params: {
						roomId: roomId,
					}
				});
			}).catch(err => {
				this.$refs.loading.close();
			});
		},
		
	}
}; 
</script>

<style lang="scss" scoped>
	.page {
		background-color: #faf1f1;
		padding-bottom: 10rpx;
	}
	.top-header {
		color: #c06cdf;
		padding: 10px 15px;
		font-weight: bold;
		font-style: italic;
		font-size: 36rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	.more-game {
		color: #c0d1f3;
	}
	.masonry {
	    display: flex;
	    flex-direction: column;
		padding-top: 10px;
	}
	
	.column {
		display: flex;
		background-color: #fff;
		margin: 0 15px;
		border-radius: 5px;
		margin-bottom: 15px;
		padding: 10px;
	}
	
	.image-logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 5px;
		margin-right: 10px;
	}
	
	.game-info-box {
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;
	}
	
	.game-title {
		font-size: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 160px;
	}
	.game-heart {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
	}
	.game-desc {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 这里是超出几行省略 */
		overflow: hidden;
		max-width: 160px;
		font-size: 26rpx;
		margin-top: 5px;
	}
	.eye-num {
		color: #606266;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}
	
	.card-list-box {
		padding: 0 30rpx;
		padding-top: 10px;
	}
	.avatar-box {
		margin-right: 30rpx;
		position: relative;
	}
	.sex-nv {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		border: 4rpx solid #fff;
		background-color: #fe709f;
		font-size: 20rpx;
		color: #fff;
	}
	.sex-nan {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		border: 4rpx solid #fff;
		background-color: #2b85e4;
		font-size: 20rpx;
		color: #fff;
	}
	.card-title {
		font-size: 30rpx;
		line-height: 70rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 320rpx;
	}
	.card-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.card-list {
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
		margin-top: 10px;
	}
	.card-tag {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.card-tag .tag {
		background-color: #faf1f1;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		margin-right: 10px;
		font-size: 22rpx;
		color: #606266;
	}
	.card-tag .tag-active {
		background-color: #faf1f1;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		margin-right: 10px;
		font-size: 22rpx;
		color: #802ead;
	}
	.card-type {
		font-size: 22rpx;
		background-color: #dd0690;
		color: #fff;
		padding: 6rpx 24rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0;
	}
	.card-coin {
		font-size: 22rpx;
		background-color: #c9be7d;
		color: #fff;
		padding: 6rpx 24rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0;
	}
	.card-status {
		font-size: 20rpx;
		background-color: #faf1f1;
		padding: 12rpx 24rpx;
		border-radius: 50px;
		position: absolute;
		top: 10px;
		right: 20px;
		color: #606266;
		display: flex;
		line-height: 20rpx;
	}
	.card-tip {
		font-size: 24rpx;
		color: #606266;
		line-height: 40rpx;
	}
	.card-tip-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.msg-box {
		font-size: 28rpx;
		color: #b5b5b5;
		min-height: 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	.loadmore-box{
		padding: 15px;
		padding-bottom: 150rpx;
	}
	.play-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
	}
	.play-btn {
		background-color: #eb92cd1a;
		padding: 20rpx 30rpx;
		border-radius: 20px;
		color: #a569d9;
		font-weight: bold;
		font-size: 28rpx;
	}
	.game-num {
		font-size: 24rpx;
		margin-top: 5px;
		color: #82848a;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
	}
	
	
	
	.card-item {
		background-color: #fff;
		padding: 10px;
		display: flex;
		margin-bottom: 10px;
		border-radius: 5px;
	}
	.card-list .card-item:last-child {
		margin-bottom: 0;
	}
	
	.card-left {
		flex: 1;
	}
	.card-right {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.card-title {
		font-weight: bold;
		font-size: 32rpx;
	}
	.card-text {
		margin-top: 5px;
		font-size: 26rpx;
	}
	.card-tip {
		font-size: 26rpx;
		margin-bottom: 5px;
	}
	.join-btn {
		padding: 5px 10px;
		border-radius: 5px;
		font-size: 26rpx;
		background-color: #eb92cd1a;
		color: #07c160;
		font-weight: bold;
	}
</style>
